// 1.饼形图 - 封装成函数 - 解决变量污染;  方便将来ajax赋值;
function setPie(arr) {
    // 初始化
    const myChart = echarts.init(document.querySelector('.pie'));
    // 定义参数
    const option = {
        // 添加标题组件
        title: {
            text: '籍贯 Hometown', // 添加标题
            textStyle: { // 添加文字样式
                color: '#6d767e'
            }
        },
        // 提示框组件
        tooltip: {
            // 要输出: 各地人员分布 XXX省 XX人 占比XXX
            // {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
            formatter: '{a}<br>{b} <b>{c}</b>人 占比{d}%'
        },
        series: [{
            name: '各地人员分布',
            type: 'pie',
            radius: ['10%', '65%'], // 内外圆形半径
            center: ['50%', '50%'], // 圆心位置
            roseType: 'area', // 面积模式/半径模式
            itemStyle: { // 元素样式设置
                borderRadius: 4 // 扇形边缘圆角设置
            },
            data: arr
        }]
    };
    // 设置参数
    myChart.setOption(option);
}
// // 页面加载的时候调用一次
// setPie();

// 2.折线图 - 封装成函数 - 解决变量污染;  方便将来ajax赋值;
function setLine(obj) {
    // 初始化
    const myChart = echarts.init(document.querySelector('.line'));
    // 定义参数
    const option = {
        // 提示框组件，不动
        tooltip: {
            trigger: 'axis',
            position: function (pt) {
                return [pt[0], '10%'];
            }
        },
        // 标题组件，修改位置，内容，颜色
        title: {
            // left: 'center',
            text: '薪资 Salary',
            textStyle: {
                color: '#6d767e'
            }
        },
        // toolbox 工具栏组件，删除
        // xAxios不用动
        xAxis: {
            type: 'category',
            boundaryGap: false, // 是否写到刻度中间;
            data: obj.name
        },
        yAxis: {
            type: 'value',
            // Y轴最大值距离顶部的距离
            boundaryGap: [0, '50%']
        },
        // 数据缩放模块: inside 鼠标在坐标系范围内滚轮滚动
        // 数据缩放模块: slider 出现滑块组件（默认值）
        dataZoom: [{
            type: 'slider',
            start: 0, // 起始位置，百分比
            end: 50 // 结束位置，百分比
        }],
        color: ['#ee6666', '#5470c6'],
        // 增加图例组件
        legend: {
            top: 20
        },
        series: [{
                name: '期望薪资',
                type: 'line',
                symbol: 'none', // 转折点的图形形状
                smooth: true, // 转折点是否平滑
                // itemStyle 单独设置元素样式，可以删除
                // areaStyle 属性删除，控制的是背景颜色
                data: obj.salary
            },
            {
                name: '实际薪资',
                type: 'line',
                symbol: 'none', // 转折点的图形形状
                sampling: 'lttb', // 转折点测量(默认值)
                smooth: true, // 转折点是否平滑
                // itemStyle 单独设置元素样式，可以删除
                // areaStyle 属性删除，控制的是背景颜色
                data: obj.truesalary
            }
        ]
    };
    // 设置参数
    myChart.setOption(option);
}
// // 页面加载的时候，调用
// setLine();

// 3.柱形图 - 封装成函数 - 解决变量污染;  方便将来ajax赋值;
function setBar(obj) {
    // 初始化
    const myChart = echarts.init(document.querySelector('.barChart'));
    // 定义参数
    const option = {
        // 此数据表，不需要标题
        // 提示框组件不用动;
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross', // 鼠标进入 十字光标触发
                crossStyle: {
                    color: '#999'
                }
            }
        },
        // toolbox 工具栏组件删除
        // legend属性，不要设置data属性
        legend: {
            // data: ['Evaporation', 'Precipitation', 'Temperature']
        },
        xAxis: [{
            type: 'category',
            data: obj.group.map(item => item + '组'),
            axisPointer: {
                type: 'shadow' // 鼠标进入坐标轴有阴影
            }
        }],
        yAxis: [{
                type: 'value',
                // name: 'Precipitation',
                min: 0, // 最小值
                max: 100, // 最大值
                interval: 10, // interval 间隔 setInterval
                axisLabel: {
                    formatter: '{value}分'
                }
            },
            {
                type: 'value',
                // name: 'Temperature',
                min: 0, // 最小值
                max: 10, // 最大值
                interval: 1, // interval 间隔 setInterval
                axisLabel: {
                    formatter: '{value}人'
                }
            }
        ],
        // 设置网格
        grid: {
            top: 30,
            left: '7%',
            bottom: 30,
            right: '7%'
        },
        series: [{
                name: '平均分',
                type: 'bar',
                // yAxisIndex: 0,// y轴索引值; 不写默认为0;
                barWidth: '15', // 柱子宽度
                // 删除tooltip
                data: obj.avgScore
            },
            {
                name: '低于60分人数',
                type: 'bar',
                barWidth: '15', // 柱子宽度
                yAxisIndex: 1, // y轴索引值; 不写默认为0;
                // 删除tooltip
                data: obj.lt60
            },
            {
                name: '60到80分之间',
                type: 'bar',
                barWidth: '15', // 柱子宽度
                yAxisIndex: 1, // y轴索引值; 不写默认为0;
                // 删除tooltip
                data: obj.gt60
            },
            {
                name: '高于80分人数',
                type: 'bar',
                barWidth: '15', // 柱子宽度
                yAxisIndex: 1, // y轴索引值; 不写默认为0;
                // 删除tooltip
                data: obj.gt80
            }
        ]
    };
    // 设置参数
    myChart.setOption(option);
}
// // 页面加载的时候，调用
// setBar();

// 4.地  图 - 封装成函数 - 解决变量污染;  方便将来ajax赋值;
function setMap(mapData1, mapData2) {
    const myChart = echarts.init(document.querySelector('.map'));

    // 位置 + 经纬度
    var chinaGeoCoordMap = mapData1;
    var chinaDatas = mapData2;

    var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var dataItem = data[i];
            var fromCoord = chinaGeoCoordMap[dataItem[0].name];
            var toCoord = [116.4551, 40.2539]; // 目标点经纬度（北京顺义校区）
            if (fromCoord && toCoord) {
                res.push([{
                    coord: fromCoord,
                    value: dataItem[0].value
                }, {
                    coord: toCoord,
                }]);
            }
        }
        return res;
    };
    var series = [];
    [
        ['顺义校区', chinaDatas]
    ].forEach(function (item, i) {
        series.push({
                type: 'lines',
                zlevel: 2,
                effect: {
                    show: true,
                    period: 4, //箭头指向速度，值越小速度越快
                    trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
                    symbol: 'arrow', //箭头图标
                    symbolSize: 5, //图标大小
                },
                lineStyle: {
                    normal: {
                        width: 1, //尾迹线条宽度
                        opacity: 1, //尾迹线条透明度
                        curveness: 0.2 //尾迹线条曲直度
                    }
                },
                data: convertData(item[1])
            }, {
                type: 'effectScatter',
                coordinateSystem: 'geo',
                zlevel: 2,
                rippleEffect: { //涟漪特效
                    period: 4, //动画时间，值越小速度越快
                    brushType: 'stroke', //波纹绘制方式 stroke, fill
                    scale: 4 //波纹圆环最大限制，值越大波纹越大
                },
                label: {
                    normal: {
                        show: true,
                        position: 'right', //显示位置
                        offset: [5, 0], //偏移设置
                        formatter: function (params) { //圆环显示文字
                            return params.data.name;
                        },
                        fontSize: 12
                    },
                    emphasis: {
                        show: true
                    }
                },
                symbol: 'circle',
                symbolSize: function (val) {
                    return 4 + val[2] * 5; //圆环大小
                },
                itemStyle: {
                    normal: {
                        show: false,
                        color: '#f00'
                    }
                },
                data: item[1].map(function (dataItem) {
                    return {
                        name: dataItem[0].name,
                        value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
                    };
                }),
            },
            //被攻击点
            {
                type: 'scatter',
                coordinateSystem: 'geo',
                zlevel: 2,
                rippleEffect: {
                    period: 4,
                    brushType: 'stroke',
                    scale: 4
                },
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        offset: [5, 0],
                        color: '#9eca7f', // 目标点文字颜色
                        formatter: '{b}',
                        textStyle: {
                            color: "#9eca7f"
                        }
                    },
                    emphasis: {
                        show: true,
                        color: "#f60", // 目标点鼠标移入的颜色
                    }
                },
                symbol: 'pin',
                symbolSize: 50,
                data: [{
                    name: item[0],
                    value: chinaGeoCoordMap[item[0]].concat([10]),
                }],
            }
        );
    });

    let option = {
        title: {
            text: '来京路线 From',
            textStyle: {
                color: '#6d767e'
            }
        },
        // tooltip: {
        //   trigger: 'item',
        //   backgroundColor: 'rgba(166, 200, 76, 0.82)',
        //   borderColor: '#FFFFCC',
        //   showDelay: 0,
        //   hideDelay: 0,
        //   enterable: true,
        //   transitionDuration: 0,
        //   extraCssText: 'z-index:100',
        //   formatter: function (params, ticket, callback) {
        //     //根据业务自己拓展要显示的内容
        //     var res = "";
        //     var name = params.name;
        //     var value = params.value[params.seriesIndex + 1];
        //     res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
        //     return res;
        //   }
        // },
        // backgroundColor: "#013954",
        // visualMap: { // 图例值控制
        //   min: 0,
        //   max: 1,
        //   calculable: true,
        //   show: false,
        //   color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
        //   textStyle: {
        //     color: '#fff'
        //   }
        // },
        geo: {
            map: 'china',
            zoom: 1.2,
            label: {
                emphasis: {
                    show: false
                }
            },
            roam: true, //是否允许缩放
            itemStyle: {
                normal: {
                    // color: 'rgba(51, 69, 89, .5)', //地图背景色
                    // color: '#5a6fc0', //地图背景色
                    // borderColor: '#516a89', //省市边界线00fcff 516a89
                    borderWidth: 1
                },
                emphasis: {
                    color: 'rgba(37, 43, 61, .5)' //悬浮背景
                }
            }
        },
        series: series
    };

    myChart.setOption(option);
}
// // 页面加载的时候，调用
// setMap() 

// 需求1: 班级概况ajax渲染;
//   页面加载，立即发送ajax
axios({
    // method: 'get',
    url: '/student/overview'
}).then(({
    data: res
}) => {
    // console.log(res);
    // 判断业务状态码
    if (res.code == 0) {
        // 渲染
        document.querySelector('.total').innerHTML = res.data.total;
        document.querySelector('.avgSalary').innerHTML = res.data.avgSalary;
        document.querySelector('.avgAge').innerHTML = res.data.avgAge;
        document.querySelector('.proportion').innerHTML = res.data.proportion;
    }
});

// 需求2: 点击按钮，成绩的显示隐藏;
const btn = document.querySelector(".bar .btn");
const ul = document.querySelector("#batch");
// 给btn绑定点击事件
btn.addEventListener('click', function () {
    // 显示隐藏1: 用类名,记得设置 display: block!important;;
    // 显示隐藏2: 通过行内设置display: block;
    // ul.style.display 只能获取行内样式;
    if (ul.style.display === 'block') {
        ul.style.display = 'none';
    } else {
        ul.style.display = 'block';
    }
});

// 需求3: 点击li标签，渲染第几次成绩;
// (页面加载，触发第一个li的点击事件)
const lis = document.querySelectorAll('#batch li');
// 绑定点击事件，发送ajax
for (let i = 0; i < lis.length; i++) {
    lis[i].addEventListener('click', function () {
        // 发送ajax
        axios({
            method: 'get',
            url: '/score/batch',
            // 查询参数，用params属性传递
            params: {
                batch: i + 1 // 第几次就是li的索引值+1
            }
        }).then(({
            data: res
        }) => {
            // console.log(res);
            // 判断业务状态码
            if (res.code == 0) {
                setBar(res.data);
            }
        });
    })
}
// (页面加载，触发第一个li的点击事件)
lis[0].click();

// 需求4: 折线图/饼形图/地图;
axios({
    method: 'get',
    url: '/student/list'
}).then(({
    data: res
}) => {
    // 判断业务状态码
    if (res.code == 0) {
        // 1.折线图数据 - 定义一个对象，里面放入三个数组;
        let lineData = {
            name: [], // 姓名组成的数组
            salary: [], // 期望薪资组成的数组
            truesalary: [], // 实际薪资组成的数组
        }
        // 2.饼形图数据 - 定义个数组，里面放对象;
        // [ { value: 40, name: '河北省' } ]
        // 遍历每一个学生，得到所有学生信息，判断这个学生的省份在这个数组中是否存在！
        // 如果存在，那么就让value+1, 如果不存在，就添加到数组中一个对象，value值为1
        //   因为后面我们要让value值+1，判断这个省份是否存在的依据就是查询索引值，查询不到返回-1；
        let pieData = []; // [ { value: 40, name: '河北省' } ]
        // 3.地图数据 - 需要定义两个数据; 第一个是对象，里面放入校区和经纬度;
        //                              第二个是数组; 二维数组(数组里面放数组，里面放的就是对象)
        let mapData1 = {
            "顺义校区": [116.4551, 40.2539]
        }; // 目标位置是默认是，不能省略;
        let mapData2 = []; // [ [ { "name": "海拉尔区", "value": 2 } ] ];
        // 注意：对象的制作可以根据逻辑实现。二维数组的生成，可以借助饼形图;

        // res.data是一个数组，里面有所有学员信息，forEach可以遍历，向指定元素中添加指定内容
        res.data.forEach(item => {
            // 向折线图的数据中添加数据
            lineData.name.push(item.name);
            lineData.salary.push(item.salary);
            lineData.truesalary.push(item.truesalary);

            // 判断每一个学生所在的省份，在 pieData 数组中是否存在;
            //    indexOf()和findIndex()都是查询索引值，不同的是第一个查看简单数据类型，第二个查看复杂数据类型;
            let index = pieData.findIndex(ele => ele.name == item.province);
            // 判断索引值是否等于-1，就可以知道数组中是否包含这个元素;
            if (index == -1) {
                // 不包含，就添加一个对象进去
                pieData.push({
                    value: 1,
                    name: item.province
                });
            } else {
                // 如果包含这个省份，就让value++
                pieData[index].value++;
            }

            // 渲染地区和经纬度: mapData1 = { "顺义校区": [ 116.4551, 40.2539 ] };
            //     用区(county)做属性，用经纬度做值;
            mapData1[item.county] = [item.jing, item.wei]; // 相同的区县，后面把前面的覆盖;
            // 某个区有多少人，mapData2 =  [ ]; // [ [ { "name": "海拉尔区", "value": 2 } ] ];
            // 需要借助饼形图的原理，查找索引值，然后判断是否存在，最后添加或者自增;
            // ele 代表的是 数组中的数组！ 所以要向得到name, 需要 ele[0]
            const i = mapData2.findIndex(ele => ele[0].name == item.county);
            // 判断是否存在 
            if (i == -1) {
                // 添加：[ { "name": "海拉尔区", "value": 2 } ]
                mapData2.push([{
                    "name": item.county,
                    "value": 1
                }]);
            } else {
                // 如果存在，value++
                // mapData2[i] 获取的是数组，我们要操作数组中的对象的value属性;
                mapData2[i][0].value++;
            }
        });

        // 循环外币指定，渲染折线图
        // console.log(lineData);
        // console.log(pieData);
        // console.log(mapData1);
        // console.log(mapData2);
        setLine(lineData);
        setPie(pieData);
        setMap(mapData1, mapData2);
    }
});